<template>
  <div>
    <p class="box-head">客源统计分析</p>
    <el-row  class="rowCon" type="flex" align="start" justify="space-around"  :gutter="20">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>客源人数统计</span>
        </div>
        <el-row type="flex" justify="space-around" :gutter="10">
          <!--<div>
            <p>客源总数</p>
            <p>{{houseAmountData.targetGross?houseAmountData.targetGross:0}}</p>
          </div>
          <div style="">
            <p>{{houseAmountData.targetDetailList[1].xData?houseAmountData.targetDetailList[1].xData:"求购"}}房源</p>
            <p>{{houseAmountData.targetDetailList[1].value?houseAmountData.targetDetailList[1].value:0}}</p>
          </div>
          <div style="">
            <p>{{houseAmountData.targetDetailList[0].xData?houseAmountData.targetDetailList[0].xData:"求租"}}房源</p>
            <p>{{houseAmountData.targetDetailList[0].value?houseAmountData.targetDetailList[0].value:0}}</p>
          </div>-->
        </el-row>
        <!-- 客源人数统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:25rem;height:25rem'"  ref="houseAmount" :option="houseAmountOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>区域客源量分布</span>
        </div>
        <!-- 区域客源量分布 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="regionalHouse" :option="regionalHouseOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>门店客源量Top10</span>
        </div>
        <!-- 门店客源量Top10 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="typeHouse" :option="typeHouseOption" />      
      </el-card>
    </el-row>
    <el-row  class="rowCon" type="flex" align="start"  justify="space-around" :gutter="20">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>客源关注点</span>
        </div>
        <!-- 客源关注点 -->
      	<div style="min-width:20rem;min-height:30rem;height:30rem" id="hotChart"></div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>共享营销客源线索</span>
        </div>
        <!-- 共享营销客源线索 -->
        <el-row type="flex" justify="space-around" :gutter="20" style="height: 2em;">
          <div>
            <p><b>求租线索</b>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #F56A00;">5000</span></p>
          </div>
          <div style="">
            <p><b>求购线索</b>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #F56A00;">3000</span></p>
          </div>
        </el-row>
        <div id="accountReceivableChart" style="min-width:20rem;min-height:28rem;height:28rem "></div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>客源来源分析</span>
        </div>
         <!-- 客源来源分析 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="sourceHouse" :option="sourceHouseOption" />
      </el-card>
    </el-row>
    <el-row class="rowCon" style="padding:10px 50px" type="flex" align="start"  justify="start">
      <condition-chart></condition-chart>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import chart from "../../../../components/Charts/chart";
import conditionChart from './my-compents/conditionChart.vue';
import { mapGetters } from 'vuex';
import {
  GetDataProfileInfo, //数据基础情况
        } from "@/api/flh/home"
require('echarts-wordcloud');
export default {
    name:'propertiesAnalysis',
    components: {
    chart,conditionChart
    },
    data() {
          return {
          	hotChart:null,
          	houseAmountData:{},//客源数据
            houseAmountOption:{},//客源人数统计
            regionalHouseOption:{},//区域客源量分布
            typeHouseOption:{},//门店客源量Top10
            sourceHouseOption:{},//客源来源分析
            params: { //查询房源指标数据
			        startTime: null,
			        endTime: null,
			        queryType: null //18001门店 18002员工 18003房源 18004客源 18005成交量 18006成交总收入18007共享营销
			      }
          }
      },
    mounted(){
      this.fetchData()
    },
     computed: {
	    ...mapGetters([
	      'gTime'
	    ])
	  },
	  watch: {
	    gTime(val) {
	      this.fetchData()
	    }
	  },
	    methods:{
	  //客源基础数据
   async fetchClientFun(){
        var self = this;
        this.setDataTime("params",18004);
        try {
          var res = await GetDataProfileInfo(self.params);
          if (res.data.code == "0") {
            var resData = res.data.result;
            this.$set(this,"houseAmountData",res.data.result);
            console.log(this.houseAmountData);
            this.initHouseAmountChart(resData);
          }
        } catch (e) {
          console.log(e);
        }
    },
    //请求参数组装
    setDataTime(name,num) {
      this[name].startTime = this.$store.getters.gTime[0];
      this[name].endTime = this.$store.getters.gTime[1];
      if(num){
        this[name].queryType = num
      }
    },
    	//共享营销客源线索
    accountReceivableChart() {
      var myData = ['去电', '跟进', '已推荐', '已签约', '已成交', '已失效'];
			var databeast =  [389, 259, 262, 324, 232, 176];
			var databeauty =  [121, 388, 233, 309, 133, 308];
      var option = {
    baseOption: {
//      backgroundColor: '',
        timeline: {
            show: false,
            axisType: 'category',
            tooltip: {
                show: true,
                formatter: function(params) {
                    console.log(params);
                    return params.name + '月份数据统计';
                }
            },
            autoPlay: true,
            currentIndex: 6,
            playInterval: 1000,
            label: {
                normal: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value}月',
                },
            },
            data: [1],
        },
        legend: {
            data: ['求购客源', '求租客源'],
            bottom: 8,
            position:"center",
            textStyle: {
                color: '#ccc',
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            formatter: '{b}<br/>{a}: {c}人',
            axisPointer: {
                type: 'shadow',
            }
        },
        
        
        
        grid: [{
            show: false,
            left: '4%',
            top: 30,
            bottom: 60,
            containLabel: true,
            width: '46%',
        }, {
            show: false,
            left: '50.5%',
            top: 30,
            bottom: 80,
            width: '0%',
        }, {
            show: false,
            right: '4%',
            top: 30,
            bottom: 60,
            containLabel: true,
            width: '46%',
        }, ],

        xAxis: [
            {
            type: 'value',
            inverse: true,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            position: 'bottom',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#B2B2B2',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1F2022',
                    width: 1,
                    type: 'solid',
                },
            },
        }, {
            gridIndex: 1,
            show: false,
        }, {
            gridIndex: 2,
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            position: 'bottom',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#B2B2B2',
                    fontSize: 12,
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1F2022',
                    width: 1,
                    type: 'solid',
                },
            },
        }, ],
        yAxis: [{
            type: 'category',
            inverse: true,
            position: 'right',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                margin: 8,
                textStyle: {
                    color: '#9D9EA0',
                    fontSize: 12,
                },

            },
            data: myData,
        }, {
            gridIndex: 1,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#9D9EA0',
                    fontSize: 12,
                },

            },
            data: myData.map(function(value) {
                return {
                    value: value,
                    textStyle: {
                        align: 'center',
                    }
                }
            }),
        }, {
            gridIndex: 2,
            type: 'category',
            inverse: true,
            position: 'left',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#9D9EA0',
                    fontSize: 12,
                },

            },
            data: myData,
        }, ],
        series: [],

    },

    options: [{
        series: [{
                name: '求购客源',
                type: 'bar',
                barGap: 20,
                barWidth: 20,
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: true,
                        position: 'left',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#659F83',
                    },
                    emphasis: {
                        color: '#08C7AE',
                    },
                },
                data: databeast,
            },
            {
                name: '求租客源',
                type: 'bar',
                barGap: 20,
                barWidth: 20,
                xAxisIndex: 2,
                yAxisIndex: 2,
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: true,
                        position: 'right',
                        offset: [0, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#F68989',
                    },
                    emphasis: {
                        color: '#F94646',
                    },
                },
                data: databeast,
            }
        ]
            }
        ]


};

      var self = this;
      if (this.receivableChart) {
        this.receivableChart.clear();
        this.receivableChart.dispose();
      }
      var self = this;
      setTimeout(() => {
        self.receivableChart = echarts.init(
          document.getElementById("accountReceivableChart")
        );
        self.receivableChart.setOption(option);
      }, 100);
    },
      //房源来源分析
      initSourceHouseChart(){
        var data = [
            { value: 8, name: "自然来访" ,type:'pie'},
            { value: 8, name: "共享营销" ,type:'pie'},
            { value: 18, name: "转介绍" ,type:'pie'},
            { value: 20, name: "驻守" ,type:'pie'},
            { value: 30, name: "派单" ,type:'pie'},
            { value: 20, name: "窗体广告" ,type:'pie'},
            { value: 40, name: "分配" ,type:'pie'},
            { value: 50, name: "网站" ,type:'pie'},
            { value: 100, name: "其他" ,type:'pie'},
          ]
          var initData = {
            //需要给我传的数据
            yData: [data],
            pieName:'房源销量分布',
            legend: [],
            refName: "sourceHouse",
            returnOption: "sourceHouseOption",
            textColor: "black",
            radius:['40%','60%'],
            center:['50%','50%'],
             label: {
                normal: {
                    position: 'outside',
                    formatter: '{b}\n{d}% \n{c}\r(套) ',
                    fontSize:15
                }
            },
          };
          this.forEachFun(initData)
      },
      //初始化热点C	hart
      initHotChart(){
      	 var markUrl = "";
      	 var presents = ['价格', '意向户型', '意向区域', '房屋面积', '不限', '户型朝向', '楼层区间', '装修情况', '户型朝向', '房屋年限', '配套设施']
				 var data = [];
				 for (var i = 0; i < presents.length; ++i) {

				     data.push({
				         name: presents[i],
				         value: (presents.length - i) * 20,
				          textStyle: {
				                normal: {},
				                emphasis: {}
				            }
				     });
				 }
      	var maskImage = new Image();
      	var Option = {
         series: [{
             type: 'wordCloud',
             gridSize: 1,
             sizeRange: [12, 40],//最小文字——最大文字
             rotationRange: [0,0],//旋转角度区间
             rotationStep: 90,//旋转角度间隔
             maskImage: maskImage,//遮罩图片
             width: 500,//遮罩图片宽度
             height: 500,//遮罩图片高度
             left: 'center',
             top: 'center',
             data: data,
             gridSize: 50,//字符间距
             textStyle: {
                 normal: {
                    // Color can be a callback function or a color string
                    color: function () {
                        // Random color
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                 },
                 emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                 }
            },
         }],
     }
      					var self = this
		             if(this.hotChart){
		                this.hotChart.clear()
                    this.hotChart.dispose()
                }
		              setTimeout(function() {
		              self.hotChart = echarts.init(document.getElementById("hotChart"))
		              maskImage.onload = function() {
                   	self.hotChart.setOption(Option)
                  }
		              maskImage.src = markUrl;
		              }, 10);
      },
      initTypeHouseChat(){
          var xData = [
          	"J店",
          	"I店",
          	"H店",
          	"G店",
          	"F店",
            "E店",
            "D店",
          	"C店",
          	"B店",
          	"A店",
        ];
        var data1 = {
          data: [300 , 500, 600, 800, 900, 1000, 1200, 1355, 1400, 1600],
          type: "bar",
          barWidth:20
        };
        var initData = {
              //需要给我传的数据
              exchange: true, //xy轴数据互换
              xData: xData,
              yData: [data1],
              color: ["#FEAA40"], 
              legend: ["客源"],
              refName: "typeHouse",
              returnOption: "typeHouseOption",
              textColor: "black",
              stack: "one",
              yAxisName: "(人)",
              grid: {
                right: "10%"
              },
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      //区域房源分布
      initRegionalHouseChart(){
          var xData = [
          "洛龙区",
          "西工区",
          "涧西区",
          "瀍河区",
          "吉利区",
          "老城区"
        ];
        var data1 = {
          data: [2000, 1000, 1500, 800, 500, 900],
          type: "bar"
        };
        var data2 = {
          data: [500, 900, 1000, 999, 1600, 1800],
          type: "bar"
        };
        var initData = {
              //需要给我传的数据
              exchange: false, //xy轴数据互换
              xData: xData,
              yData: [data1, data2],
              color: ["#FEAA40", "#FA4361"], 
              legend: ["求购客源", "求租客源"],
              refName: "regionalHouse",
              returnOption: "regionalHouseOption",
              textColor: "black",
              stack: "one",
              yAxisName: "(人)",
              grid: {
                right: "10%"
              },
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      forEachFun(initData) {
//        //处理数据生成Option
//        var option = this.$utils.returnItemSeries(initData);
//        this.$set(this, initData.returnOption, option);
//        var self = this;
//        setTimeout(function() {
//          if (self.$refs[initData.refName][0]) {
//            self.$refs[initData.refName][0].initChart();
//          } else {
//            self.$refs[initData.refName].initChart();
//          }
//        }, 0);
      },
       //客源量图表
       initHouseAmountChart(queryData){
//          var data = [
//          { value: queryData.targetDetailList[1].value, name: queryData.targetDetailList[1].xData+"客源" ,type:'pie'},
//          { value: queryData.targetDetailList[0].value, name: queryData.targetDetailList[0].xData+"客源" ,type:'pie'},
//        ]
//        var initData = {
//          //需要给我传的数据
//          yData: [data],
//          pieName:'房源销量分布',
//          legendObj:{
//          data:[queryData.targetDetailList[1].xData+"客源",queryData.targetDetailList[0].xData+"客源"],
//            bottom: 10,
//          },
//          refName: "houseAmount",
//          returnOption: "houseAmountOption",
//          textColor: "black",
//          radius:['40%','60%'],
//          center:['50%','50%'],
//          label: {
//              normal: {
//                  position: 'outside',
//                  formatter: '{b}\n{d}% \n{c}\r(套) ',
//                  fontSize:15
//              }
//          },
//          seriesCenter:[{
//                  name: '白',
//                  type: 'pie',
//                  clockWise: true,
//                  hoverAnimation: false,
//                  radius: [100, 100],
//                  label: {
//                      normal: {
//                          position: 'center'
//                      }
//                  },
//                  data: [{
//                      value: 1,
//                      label: {
//                          normal: {
//                              formatter: '\n'+queryData.targetGross,
//                              textStyle: {
//                                  color: '#666666',
//                                  fontSize: 26
//                              }
//                          }
//                      }
//                  }, {
//                      tooltip: {
//                          show: false
//                      },
//                      label: {
//                          normal: {
//                              formatter: '\n客源总数',
//                              textStyle: {
//                                  color: '#666666',
//                                  fontSize: 15
//                              }
//                          }
//                      }
//                  }]
//                      }]
//        };
//        this.forEachFun(initData)
      },
        //获取数据
        fetchData(){
          this.fetchClientFun()//客源分析
          this.initRegionalHouseChart()
          this.initTypeHouseChat()
          this.initSourceHouseChart()
          this.initHotChart()
          this.accountReceivableChart();
        },
        //跳页面
        pushPage(name){
            this.$router.push({ 
                path: name 
            })
        },
    }
}
</script>
<style scoped>
@import '../main.css'; 


</style>
